<template>
	<view class="content" >
		<u-navbar :is-back="false" :border-bottom="false" height="54">
			<view style="padding-left: 10px;">社群</view>
			<view  class="slot-wrap disfr-lr p15 f32" style="width: 86%;">
				<!--<view class="slot-wrap-left"></view>-->
				<!--<view class="slot-wrap-center mt20"></view>-->
				<view class="slot-wrap-right pr disf" style="width: 100%;">
					<view  style="position: relative;top:-2px;right: -3px;width: 100%;">
						<u-search v-model="keyword" @search="toSearch" shape="round" @clear="clearContent" :clearabled="true" :show-action="false" :animation="true"></u-search>
					</view>
					<!--<view @click="setClassArrow" style="margin-left: 20px;">
						<u-icon v-if="classArrow"  color="#2979ff" name="fenlei" 
						custom-prefix="qxl-icon" style="position: relative;top:2px;" size="44"></u-icon>
						<u-icon v-else name="fenlei" custom-prefix="qxl-icon"
						style="position: relative;top:2px;" size="44"></u-icon>
					</view>-->
					<view style="margin-left: 20px;position: relative;top:2px;right:-4px;"
					@click="goPage" data-uri="/pages/create-group/create-group">
						<u-icon name="plus"  size="46"></u-icon>
					</view>
				</view>
			</view>
		</u-navbar>
		
		<my_navbar_ext height="160rpx" bg-color="#ffffff">
			<scroll-view
			:style="{width:'100%'}"
			scroll-x="true" 
			:show-scrollbar="false"
			:scroll-with-animation="true">
				<view class="f28 pt20 pb20 disf" style="width: 100%;">
					<view v-for="(item,index) in classify" :key="index" 
					class="mr20" @click="getClasspage" :data-id="item.id"
					style="text-align: center;width: 120rpx;flex-shrink: 0;">
						<view><image :src="item.thumbnail" style="width: 80rpx;flex-shrink: 0;" mode="widthFix"></image></view>
						<view class="toell">{{item.name}}</view>
					</view>
				</view>
			</scroll-view>
		</my_navbar_ext>
		
		
		<view v-if="show_main" class="main" >
			
			<view v-for="(item,index) in list" :key="item.id" class="bgf pt20 bto" >
				<view class="disf p20" @click="goPage" :data-uri="'/pages/chat-group/chat-group?to='+item.tencent_group_id+'&conversationID=GROUP'+item.tencent_group_id">
					<view style="width: 90rpx;height: 90rpx;overflow: hidden;border-radius:6px;flex-shrink: 0;">
						<!--<u-image width="94rpx" height="94rpx" :src="item.face_url">
							<template v-slot:error>
								<image src="/static/image/default-user.png" style="width:94rpx;height: 94rpx;"></image>
							</template>
						</u-image>-->
						<view style="line-height: 0;">
							<view>
								<image :src="item.avatars[0]" style="width:30rpx;height: 30rpx;"></image>
								<image :src="item.avatars[1]" style="width:30rpx;height: 30rpx;"></image>
								<image :src="item.avatars[2]" style="width:30rpx;height: 30rpx;"></image>
							</view>
							<view>
								<image :src="item.avatars[3]" style="width:30rpx;height: 30rpx;"></image>
								<image :src="item.avatars[4]" style="width:30rpx;height: 30rpx;"></image>
								<image :src="item.avatars[5]" style="width:30rpx;height: 30rpx;"></image>
							</view>
							<view>
								<image :src="item.avatars[6]" style="width:30rpx;height: 30rpx;"></image>
								<image :src="item.avatars[7]" style="width:30rpx;height: 30rpx;"></image>
								<image :src="item.avatars[8]" style="width:30rpx;height: 30rpx;"></image>
							</view>
						</view>
					</view>
					<view class="f28 ml10">
						<view class="f32 disfr-lr">
						  <view class="f34 toell" style="width: 470rpx;">{{item.name}}({{item.MemberNum}})</view>
						  <view>
							  <view class="custom-min-button pr" 
							  style="border-radius: 4px;font-size: 22rpx;top:-5rpx;">加入群聊</view>
						  </view>
						</view>
						<view class="mt5 col999 toell" style="width: 550rpx;">[{{item.cate_name}}]{{item.introduction ? item.introduction : '群主很懒什么也没有留下~'}}</view>
					</view>
				</view>
			</view>
			
            <view v-if="list.length <= 0 && not_load" style="text-align: center;margin-top: 40%;">
				<view><u-icon name="wuneirong-copy" custom-prefix="qxl-icon" color="#999999" size="100"></u-icon></view>
				<view class="f32 col999 mt20">什么都木有哦</view>
			</view>
			
		</view>
		<pageload :page_load="page_load" :next_page="next_page" :list="list" /><!--分页加载状态-->
		<view style="height: 50px;"></view>
	   <!--<loading :loading="not_load"/><!--加载状态-->
	   <u-tabbar v-model="$vuex.state.globalData.tabBar.current" height="105rpx" icon-size="40rpx"
	   :list="$vuex.state.globalData.tabBar.list" active-color="#2979ff" 
	   :mid-button="false"></u-tabbar><!--自定义底部导航-->
	   <u-no-network tips="哎呀，网络信号丢失"></u-no-network><!--检测网络-->
	</view>
</template>

<script setup>
import { onLoad, onShow, onHide, onReachBottom,onPullDownRefresh } from '@dcloudio/uni-app';
import { ref } from 'vue';	
const show_main=ref(true);
const page_load=ref(false);
const not_load=ref(false);
const next_page=ref('');
const keyword=ref('');
const search=ref(false);
const list=ref([]);
const classify=ref([]);
const classArrow=ref(true);
const searchParam=ref({});
// 显示群分类
const setClassArrow=()=>{
	classArrow.value=classArrow.value ? false : true;
};
//页面加载时
onLoad(async (options)=>{
	uni.offNetworkStatusChange(connected)
	uni.onNetworkStatusChange(connected);
});
const connected=(res)=>{
	if(res.isConnected){
		getclassify();
		loadPage({},false);
	}
};
//页面显示时执行
onShow(()=>{
	//console.log('语法糖onShow');
	getclassify();
	loadPage({},false);
});
//页面隐藏时执行
onHide(()=>{
	//console.log('语法糖onHide');
});
//获取群分类
const getclassify=async()=>{
	let ret = await uni.$get('/appapi-group-getclassify',{page_zise:100});
	classify.value=ret.data.list;
};
// 获取分类ID群聊列表
const getClasspage=async(e)=>{
	not_load.value=false;
	let c_id=e.currentTarget.dataset.id;
	searchParam.value.c_id=c_id;
	loadPage(searchParam.value,false);
};
/**
 * 加载接口数据
 * @param {Object} options  参数,对像数组
 * @param {Object} isPage   是否加载大于1页
 */
const loadPage=async (options,isPage)=>{
	let ret = await uni.$get('/appapi-group-getlist',options);
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
	for(let i in ret.data.list){
		ret.data.list[i].avatars=uni.$utils.getProfile();
	}
	//console.log(ret.data);
    page_load.value=false;
	show_main.value=true;
	not_load.value=true;
	next_page.value=ret.data.next_page;
	if(isPage) list.value=[...list.value,...ret.data.list];
	else list.value=ret.data.list;
};
onPullDownRefresh(()=>{
	//console.log('onPullDownRefresh');
	//not_load.value=false;
	setTimeout(()=>{
		loadPage({},false);
		uni.stopPullDownRefresh();
	}, 1000);
});
//上拉触底加载分页
onReachBottom(()=>{
	//console.log('onReachBottom',11111);
	if (!next_page.value) return;
	if (page_load.value) return;
	page_load.value=true;
	setTimeout(()=>{
	  loadPage(next_page.value, true); 
	},2000);
});
/**
 * 模板属性跳转页面
 * @param {Object} e
 */
function goPage(event){
	//topDropDownShow.value=false;
	//console.log(111111);
	uni.$utils.dataSetPage(event);
};
//清空关键字
const clearContent=()=>{
	keyword.value='';
};
// 显示检索
const showSearch=()=>{
	search.value=true;
};
//去检索
const toSearch=()=>{
	searchParam.value.name=keyword.value;
	loadPage(searchParam.value,false);
};
</script>

<style  lang="scss">
	page {
		
	}
.fnow{color:#2979ff;}
</style>
